import './index.scss';
import React, { useEffect, useState, useRef } from "react";
import { user_new_wallet, user_import_wallet } from '@/utils/mixin.ts'
import { Button, Input, message } from 'antd';
import { ArrowLeftOutlined, DeleteOutlined, ExclamationCircleFilled } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from "react-i18next";

const NewWallet = () => {
    const [walletValue, setWalletValue] = useState([]);
    const navigate = useNavigate();
    const { t } = useTranslation();
    const [isNewActive, setNewActive] = useState(true);
    const [isImportActive, setImportActive] = useState(false);
    const saveWallet = () => {
        if(isNewActive) {
            user_new_wallet({
                name: walletValue,
                email: localStorage.getItem('email')
    
            }).then(res => {
                if (res) {
                    message.success(t('Added successfully'));
                    navigate('/dashboard/wallets');
                } else {
                    message.error(res.msg);
                }
            });
        } else {
            user_import_wallet({
                priv_key: walletValue,
                name: '导入地址',
                email: localStorage.getItem('email')
    
            }).then(res => {
                if (res) {
                    message.success(t('Added successfully'));
                    navigate('/dashboard/wallets');
                } else {
                    message.error(res.msg);
                }
            });
        }
       
    }
    const changeTabs = (type) => {
        if (type === 'new') {
            setNewActive(true);
            setImportActive(false);
        } else {
            setNewActive(false);
            setImportActive(true);
        }
    }

    return (
        <div className="newWallet">
            <div className="header">
                <Button type="text" onClick={() => window.history.go(-1)} icon={<ArrowLeftOutlined style={{ fontSize: '15px' }} />}></Button>
                <Button type="text"></Button>
            </div>
            <div className="content">
                <p className="tabs">
                    <span className={isNewActive ? 'active' : ''} onClick={() => {changeTabs('new')}}>{t('NewWallet')}</span>
                    <span className={isImportActive ? 'active' : ''} onClick={() => {changeTabs('import')}}>{t('ImportAccount')}</span>
                </p>
                <p className="msg">
                    <ExclamationCircleFilled />
                    {t('ImportMsg')}</p>
                <p className="label">{isNewActive ? t('walletName') : t('privateKeyAddress')}</p>
                <Input placeholder={isNewActive ? t('namePlaceholder') : 'Ox'} onChange={(e) => { setWalletValue(e.target.value) }}/>
                <Button type="primary" className="save" onClick={() => saveWallet()}>{t('Add')}</Button>
            </div>
        </div>
    )

}

export default NewWallet;